<template>
	<view>
		<view class="nav">
			<view class="left">
				<image src="../../static/uview/example/js_select_bak.png" mode=""></image>
				<view class="">
					Andrew
				</view>
				<u-icon name="arrow-right" style="color: #82848A;"></u-icon>
			</view>
			<u-icon name="chat" style="font-size: 50rpx;color: #82848A;"></u-icon>
		</view>
		<view class="main">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :show-bar='false'></u-tabs>
		</view>
		<view class="c-wrap">
			<view class="c-item" v-for="(item,index) in cList" style="position: relative;" @tap='toWacth(item)'>
				<view class="" style="height:80%;background-color: yellowgreen;">
					<view class="" style="text-align:right;font-size: 24rpx;padding: 2rpx;transform: scale(.9);display: flex;align-items: center;flex-direction: row-reverse;color: #FFFFFF;">
						<view class="">
							{{item.status === 0 ? '离线' :'在线'}}
						</view>
						<view :class="item.status === 0 ? 'off-line' :'online'"></view>
					</view>
					<view class="" style="width: 70rpx;height: 70rpx;border-radius: 50%;margin: auto;margin-top: 20rpx;">
						<image src="/static/play.png" mode="" style="height: 70rpx;width: 70rpx;margin: auto;"></image>
					</view>
				</view>
				<view class="name" style="position: absolute;bottom: 0;overflow: hidden;font-size: 22rpx;transform: scale(1.1);padding: 0 5rpx;">{{item.deviceSerial}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import EZUIKitJs from '@/components/EZUIKitJs.vue'
	export default {
		components: {
			// EZUIKitJs
		},
		data() {
			return {
				current: 0,
				list: [{
					name: '全部'
				}, {
					name: '大厅'
				}, {
					name: '走廊',
				}, {
					name: '会议室'
				}],
				cList: []
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			toWacth(item){
				console.log(item)
				uni.navigateTo({
					url:`/pages/detail/detail?data=${JSON.stringify(item)}`,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			change(index) {
				this.current = index;
			},
			getList() {
				uni.request({
					url: "https://open.ys7.com/api/lapp/camera/list",
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						accessToken:uni.getStorageSync('accessToken'),
						pageStart:0,
						pageSize:50
					},
					success: (res) => {
						console.log('摄像头列表', res.data)
						this.cList = res.data.data
					},
					fail: (err) => {
						console.log('获取失败', err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		display: flex;
		// border: 1px solid;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			view {
				margin-left: 15rpx;
			}
		}

		.right {}
	}

	.main {
		padding: 30rpx;
	}

	.c-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;

		.c-item {
			width: 320rpx;
			height: 220rpx;
			// border: 1px solid;
			margin-bottom: 50rpx;
		}
	}
	.off-line{
		background: red;
	}
	.online{
		background-color: green;
		opacity: .5;
	}
	.off-line,.online{
		height: 12rpx;
		width: 12rpx;
		border-radius: 50%;
		margin: 0 6rpx ;
	}
</style>
